<template>
  <div class="filterContent">
    <a-form :model="filterForm" layout="inline">
      <a-form-item label="选择日期">
        <a-date-picker
          v-model:value="filterForm.date"
          class="formInput"
          placeholder="请选择日期"
          :format="'YYYY-MM-DD'"
          value-format="YYYY-MM-DD"
          style="width: 150px"
          :allowClear="false"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" class="filterBtn" @click="handleQuery"
          >查询</a-button
        >
        <!--  <a-button
          type="primary"
          class="filterBtn greenBtn"
          @click="handleRunStrategy"
          v-hasPermission="'strategyDashboardImport'"
          >运行策略导入</a-button
        > -->
        <!-- <a-button
          type="primary"
          class="filterBtn greenBtn"
          @click="handleCurrentPrice"
          >日前价格导入</a-button
        > -->
        <!-- <a-button
          type="primary"
          class="yellowBtn"
          @click="handleSaveModel"
          :disabled="true"
          v-hasPermission="'strategyDashboardModel'"
          >收益模型</a-button
        > -->
      </a-form-item>
    </a-form>
  </div>
  <div class="chartContent">
    <template v-if="loading">
      <div
        style="
          width: 100%;
          height: 600px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <a-spin />
      </div>
    </template>
    <template v-else>
      <ExecutionChart
        :actualData="actualLine"
        :predictData="predictLine"
        :priceData="priceData"
        :date="filterForm.date"
        :pedictIncome="pedictIncome"
      />
      <!-- <PriceChart
        :data="priceData"
        :date="filterForm.date"
        :pedictIncome="pedictIncome"
      /> -->
      <Strategy :formulaPower="formulaPower" :spotStrategy="spotStrategy" />
      <ImportStrategyModal
        :visible="importStrategyVisible"
        @update:visible="(val) => (importStrategyVisible = val)"
        @update:handleQuery="() => handleQuery()"
      />
      <CurrentPriceModal
        :visible="currentPriceVisible"
        @update:visible="(val) => (currentPriceVisible = val)"
        @update:handleQuery="() => handleQuery()"
      />
    </template>
  </div>
</template>
<script setup>

import ExecutionChart from "./components/ExecutionChart/index.vue"
import PriceChart from "./components/PriceChart/index.vue"
import Strategy from "./components/Strategy/index.vue"
import ImportStrategyModal from "./components/ImportStrategyModal.vue"
import CurrentPriceModal from "./components/CurrentPriceModal.vue"
import moment from "moment"
const $api = inject("$api")
const filterForm = ref({
  date: moment().format("YYYY-MM-DD"),
})

// 标准策略数据
const formulaPower = ref([])
const spotStrategy = ref([])

const actualLine = ref([])
const predictLine = ref([])
const priceData = ref([])
const pedictIncome = ref(null)
const loading = ref(false)
const handleQuery = async () => {
  // 处理查询逻辑
  loading.value = true
  const res = await $api.getLines({
    date: filterForm.value.date,
  })
  if (res && res.code === 0) {
    actualLine.value = res.data.actualLine
    predictLine.value = res.data.predictLine
    //priceData.value = res.data.priceDayLine
    pedictIncome.value = res.data.pedictIncome
    formulaPower.value = res.data.formulaPower
    spotStrategy.value = res.data.spotStrategy
  } else {
    if (res?.mag) {
      message.error(res.mag)
    } else {
      message.error("查询失败")
    }
  }
  await getMarketPrice()
  loading.value = false
}
const getMarketPrice = async () => {
  let params = {
    startTime: filterForm.value.date,
    endTime: filterForm.value.date,
  }
  let res = await $api.priceinfoMarket(params)
  priceData.value = res.data.dayAgoList
}

const importStrategyVisible = ref(false)
const currentPriceVisible = ref(false)

const handleRunStrategy = () => {
  importStrategyVisible.value = true
}

const handleCurrentPrice = () => {
  currentPriceVisible.value = true
}

const handleSaveModel = () => {
  // 处理收益模型逻辑
}
onMounted(async () => {
  handleQuery()
})
</script>
<style lang="less" scoped>
.filterContent {
  .filterBtn {
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
}
.chartContent {
  margin-top: 20px;
  background: #141414;
  padding: 20px;
  border-radius: 4px;
  .chart {
    width: 100%;
    height: 600px;
  }
}
</style>
